<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/taglibs.jsp" %>
<script type="text/javascript">
    var dataGrid;
    $(function(){
        dataGrid = $('#userTable').datagrid({
            url:"../user/queryList.html", //数据来源
            border : false,
            fit : true,
			fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
			sortName: 'user.id', //排序的列
			sortOrder: 'desc', //倒序
			remoteSort: true, //服务器端排序
			idField:'uid', //主键字段
			queryParams:{}, //查询条件
			pagination:true, //显示分页
			rownumbers:true, //显示行号
            nowrap : false,
            frozenColumns : [ [
                {field:'ck',checkbox:true,width:2} //显示复选框
            ] ],
			columns:[[

				{field:'user.name',title:'名字',width:20,sortable:true,
					formatter:function(value,row,index){return row.user.name;} //需要formatter一下才能显示正确的数据
				},
				{field:'user.age',title:'年龄',width:20,sortable:true,
					formatter:function(value,row,index){return row.user.age;}
				},
				{field:'user.birthday',title:'生日',width:30,sortable:true,
					formatter:function(value,row,index){return row.user.birthday;}
				},
				{field:'user.deptId',title:'部门',width:30,sortable:true,
					formatter:function(value,row,index){
						return row.deptName;  //该列的值是deptId，显示的是deptName
					}
				}
			]],
            toolbar : '#toolbar',
			onLoadSuccess:function(){
                $('#queryForm table').show();
				$('#userTable').datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
			},
            onRowContextMenu : function(e, rowIndex, rowData) {
                e.preventDefault();
                $(this).datagrid('unselectAll').datagrid('uncheckAll');
                $(this).datagrid('selectRow', rowIndex);
                $('#menu').menu('show', {
                    left : e.pageX,
                    top : e.pageY
                });
            }
		});
    	
		//下拉表格初始化，这个东西在ajax下要尽量少用，太变态了，每加载一次就会重新创建一次，隐藏在页面上，
		//时间一长效率很低，用firebug一看页面上有几十个同样的层保存着下拉框中的内容，只有整个页面全部刷新才清除。
		//不知道新版本修正了没有，我目前的做法是点击菜单的时候手动清除一下。
		$('#deptCombo').combogrid({
			idField:'id', //ID字段
		    textField:'name', //显示的字段
		    url:"../dept/queryAll.html",
		    fitColumns: true,
			striped: true,
			editable:false,//不可编辑，只能选择
		    columns:[[
		        {field:'code',title:'编号',width:100},
		        {field:'name',title:'名称',width:150}
		    ]]
		});

        //下拉表格初始化
        $('#addDeptId').combobox({
            valueField:'id', //值字段
            textField:'name', //显示的字段
            url:'../dept/allList.html',
            panelHeight:'auto',
            required:true,
            editable:false//不可编辑，只能选择
        });

        $("#userInfo").show();
        $("#addUser").hide();

	});
    //新增页面
    function addFun(){
//        parent.$.modalDialog({
//            title : '添加用户',
//            width : 500,
//            height : 350,
//            href : '../user/popWindow.html',
//            buttons : [ {
//                text : '添加',
//                handler : function() {
//                    parent.$.modalDialog.openner_dataGrid = dataGrid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
//                    var f = parent.$.modalDialog.handler.find('#userForm');
//                    f.submit();
//                }
//            } ]
//        });
        $('#userForm').form('clear');
        $("#userInfo").hide();
        $("#addUser").show();
    }

    //新增提交
    function addUserSubmit(){
        $('#userForm').form({
            url : '../user/addOrUpdate.html',
            onSubmit : function() {
                parent.$.messager.progress({
                    title : '提示',
                    text : '数据处理中，请稍后....'
                });
                var isValid = $(this).form('validate');
                if (!isValid) {
                    parent.$.messager.progress('close');
                }
                return isValid;
            },
            success : function(result) {
                parent.$.messager.progress('close');
                result = $.parseJSON(result);
                if (result.success) {
                    $("#userInfo").show();
                    $("#addUser").hide();
                    $('#userTable').datagrid('reload');
                } else {
                    parent.$.messager.alert('错误', result.msg, 'error');
                }
            }
        });

        $('#userForm').submit();
    }

    function back(){
        $("#userInfo").show();
        $("#addUser").hide();
    }

  //更新
    function updaterow(){
		var rows = $('#userTable').datagrid('getSelections');
		//这里有一个jquery easyui datagrid的一个小bug，必须把主键单独列出来，要不然不能多选
		if(rows.length==0){
			$.messager.alert('提示',"请选择你要更新的用户",'info');
			return;
		}
		if(rows.length > 1){
			$.messager.alert('提示',"只能选择一位用户进行更新",'info');
			return;
		}

        $("#userForm").form('load', rows[0].user);
        $("#userInfo").hide();
        $("#addUser").show();
	}
  	
  //删除
  	function deleterow(){
        var rows = $('#userTable').datagrid('getSelections');
        if(rows.length==0){
            $.messager.alert('提示',"请选择你要删除的用户",'info');
            return;
        }
  		$.messager.confirm('提示','确定要删除吗?',function(result){
	        if (result){
	        	var ps = "";
	        	$.each(rows,function(i,n){
	        		if(i==0) 
	        			ps += "?uid="+n.uid;
	        		else
	        			ps += "&uid="+n.uid;
	        	});
                parent.$.messager.progress({
                    title : '提示',
                    text : '正在删除中，请稍后....'
                });
	        	$.post('../user/delete.html'+ps,function(data){
                    parent.$.messager.progress('close');
                    $.messager.alert('提示',data.mes,'info');
		        	$('#userTable').datagrid('reload'); 
	        	});
	        }
	    });
  	}
    //表格查询
	function searchUser(){
		var params = $('#userTable').datagrid('options').queryParams; //先取得 datagrid 的查询参数
		var fields =$('#queryForm').serializeArray(); //自动序列化表单元素为JSON对象
		$.each( fields, function(i, field){
			params[field.name] = field.value; //设置查询参数
		}); 
		$('#userTable').datagrid('reload'); //设置好查询参数 reload 一下就可以了
	}
	//清空查询条件
	function clearForm(){
		$('#queryForm').form('clear');
		searchUser();
	}
    
	</script>
    <div id="userInfo" class="easyui-layout" data-options="fit : true,border : false">
        <div data-options="region:'north',title:'查询条件',border:false" style="height: 100px; overflow: hidden;">
        <form id="queryForm" style="margin:10;text-align: left;">
            <div class="ui-appcenterform">
                <div class="ui-form">
                    <div class="ui-form-txt01">名字：</div>
                    <div class="ui-form-item"><input type="text" name="name" class="ui-txtinput01"/></div>
                </div>
                <div class="ui-form">
                    <div class="ui-form-txt01">部门：</div>
                    <div class="ui-form-item" style="position: relative;top: -4px;"><input id="deptCombo" name="deptId" style="width:150px;height: 30px;"/></div>
                </div>
            </div>
        </form>
        </div>
        <div data-options="region:'center',border:false">
            <table id="userTable"></table>
        </div>
    </div>

    <div id="addUser" class="easyui-layout" data-options="fit : true,border : false">
        <div data-options="region:'center',title:'增加员工信息',border:false">
            <form id="userForm" method="post">
                <div class="ui-appcenterform">
                    <div class="ui-form">
                        <input type="hidden" name="id" id="uuid"/>
                        <div class="ui-form-txt01">名字:</div>
                        <div class="ui-form-item"><input name="name" type="text" placeholder="请输入名字" validType="length[3,30]" class="easyui-validatebox ui-txtinput01" data-options="required:true"/></div>
                    </div>
                    <div class="ui-form">
                        <div class="ui-form-txt01">密码:</div>
                        <div class="ui-form-item"><input name="password" type="password" placeholder="请输入密码"  validType="length[3,30]" class="easyui-validatebox ui-txtinput01" data-options="required:true"/></div>
                    </div>
                    <div class="ui-form">
                        <div class="ui-form-txt01">年龄:</div>
                        <div class="ui-form-item"><input type="text"  placeholder="请输入年龄" class="easyui-validatebox ui-txtinput01" name="age" min="1" max="120" increment="1"/></div>
                    </div>
                    <div class="ui-form">
                        <div class="ui-form-txt01">生日:</div>
                        <div class="ui-form-item"><input type="text" name="birthday" class="easyui-validatebox ui-txtinput01" onClick="WdatePicker()"/></div>
                    </div>
                    <div class="ui-form">
                        <div class="ui-form-txt01">编号:</div>
                        <div class="ui-form-item"><input type="text" class="ui-txtinput01" /></div>
                    </div>
                    <div class="ui-form">
                        <div class="ui-form-txt01">部门:</div>
                        <div class="ui-form-item" style="position: relative;top: -4px;"><input type="text" id="addDeptId" name="deptId" class="ui-txtinput01" style="width:140px;height: 30px;"/></div>
                    </div>
                </div>
                <div style="text-align:center;">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'shape_square_add'" onclick="addUserSubmit();">Add</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'shape_square_go'" onclick="back();">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    <div id="toolbar" style="position: relative;top: -5px;display: none;">
            <a onclick="addFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'pencil_add'">添加</a>
            <a onclick="updaterow();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'pencil'">编辑</a>
            <a onclick="deleterow();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'pencil_delete'">删除</a>
            <a onclick="searchUser();" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_add',plain:true">过滤条件</a>
            <a onclick="clearForm();" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_delete',plain:true">清空条件</a>
    </div>
    <div id="menu" class="easyui-menu" style="width: 120px; display: none;">
        <div onclick="addFun();" data-options="iconCls:'pencil_add'">增加</div>
        <div onclick="updaterow();" data-options="iconCls:'pencil'">编辑</div>
        <div onclick="deleterow();" data-options="iconCls:'pencil_delete'">删除</div>
    </div>